<template>
  <div class="app">
    <div id="main_category4" ref="main" style="height: 250px"> </div>
  </div>
</template>
<script>
import { onMounted } from 'vue';
import * as echarts from "echarts";
export default {
  setup() {
    onMounted(() => {
      let myChart = echarts.init(document.getElementById("main_category4"));
      // 绘制图表
      myChart.setOption({
        title: {
          text: '意向分析',
          textStyle: {
            fontSize: 15, //字体大小
          },
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '8%',
          right: '15%',
          bottom: '5%',
          top: '30%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          boundaryGap: [0, 0.01],
          show: true,
          axisLabel: {
            interval: 0,  //设置间隔为0
            textStyle: {
              fontSize: "8"
            }
          },
          axisLine: { onZero: false }
        },
        yAxis: {
          type: 'category',
          data: ['一级用户', '一级用户', '一级用户', '一级用户', '一级用户', '一级用户'],
          axisLabel: {
            interval: 0,  //设置间隔为0
            textStyle: {
              fontSize: "8"
            }
          },
          axisLine: { onZero: false }
        },
        series: [
          {
            name: '2011',
            type: 'bar',
            data: [182, 235, 296, 104, 131, 630],
            barCategoryGap: '60%',
          }
        ]
      });
    });
  },
  data() {
    return {
    };
  },
  methods: {
  }
};
</script>
<style>
.app {
  margin: 0;
}
</style>